<template>
    <div class="transaction_summary">

        <div class="time_con fs-mini" @click="showCalendar=true">
            <div style="fontWeight:bold" class="flex_start">
                <span style="marginRight: 6px">日期区间</span>
                <van-icon name="arrow-down" />
            </div>
            <div class="color-light">2020.10.01 至 2020.10.31</div>
        </div>

        <div class="summary_block ">
            <div class="value_block flex_space_around gshadow2">
                <div>
                    <div class="amount">10.00</div>
                    <div class="desc">交易金额(元)</div>
                </div>
                <div>
                    <div class="amount">12</div>
                    <div class="desc">交易笔数</div>
                </div>
            </div>
        </div>

        <div class="summary_list ">
            <van-row class="line">
                <van-col span="12">交易类型</van-col>
                <van-col span="6" class="num">交易笔数</van-col>
                <van-col span="6" class="num">交易金额</van-col>
            </van-row>
            <van-row class="line">
                <van-col span="12">支付宝</van-col>
                <van-col span="6" class="num">20</van-col>
                <van-col span="6" class="num">2000.00</van-col>
            </van-row>
            <van-row class="line">
                <van-col span="12">支付宝</van-col>
                <van-col span="6" class="num">20</van-col>
                <van-col span="6" class="num">2000.00</van-col>
            </van-row>
            <van-row class="line">
                <van-col span="12">支付宝</van-col>
                <van-col span="6" class="num">20</van-col>
                <van-col span="6" class="num">2000.00</van-col>
            </van-row>
        </div>
        <calendar v-model="showCalendar" type="range" :min-date="minDate" @confirm="onConfirm" color="#1989fa" />

    </div>
</template>

<script>
import { Calendar } from "vant";

export default {
    components: { Calendar },

    data() {
        return {
            showCalendar: false,
            minDate: new Date(2020, 0, 1),
        }
    },

    methods: {
        onConfirm(date) {
            this.showCalendar = false;
            const [start, end] = date;
            console.log(this.formatDate(start), this.formatDate(end))
        },

        formatDate(date) {
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        },
    }
};
</script>

<style lang="scss" scoped>
@import "@/assets/color.scss";

.transaction_summary {
    padding: 10px;
    .time_con {
        padding: 10px 0;
    }

    .value_block {
        background-color: $BG_COLOR;
        border-radius: 6px;
        padding: 10px;
        div {
            text-align: center;
            color: #fff;
        }
        .amount {
            font-size: 30px;
            font-weight: bold;
        }
        .desc {
            font-size: 14px;
        }
    }

    .summary_list {
        color: #666;
        background-color: #fff;
        margin-top: 10px;
        padding: 10px;
        border-radius: 6px;
        font-size: 14px;
        .line {
            /deep/ .van-col {
                height: 40px;
                line-height: 40px;
            }
        }
        .num {
            text-align: center;
        }
    }
}
</style>